<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>project_create</title>

    <!-- Bootstrap -->
    <link href="/resa/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="/resa/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="/resa/vendors/nprogress/nprogress.css" rel="stylesheet">
    <!-- Switchery -->
    <link href="/resa/vendors/switchery/dist/switchery.min.css" rel="stylesheet">
    <!-- bootstrap-daterangepicker -->
    <link href="/resa/vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
    <!-- bootstrap-datetimepicker -->
    <link href="/resa/vendors/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
    <!-- PNotify -->
    <link href="/resa/vendors/pnotify/dist/pnotify.css" rel="stylesheet">
    <link href="/resa/vendors/pnotify/dist/pnotify.buttons.css" rel="stylesheet">
    <link href="/resa/vendors/pnotify/dist/pnotify.nonblock.css" rel="stylesheet">
    <!-- Custom Theme Style -->
    <link href="/resa/build/css/custom.min.css" rel="stylesheet">
</head>
<style>
    ::-webkit-scrollbar {/*滚动条*/
        width:5px;
        height: 5px;
    }
    ::-webkit-scrollbar-track {/*滚动槽*/
        -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
        border-radius:10px;
    }
    ::-webkit-scrollbar-thumb {/*滚动条滑块*/
        border-radius:10px;
        background:rgba(0,0,0,0.1);
        -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
    }
    .forms input{
        border-color: #EDEDED;
        border-radius: 5px;
        height: 40px;
        margin: 10px 2px;
        width: 80%;
    }
    .forms input:hover,input:focus {
        border-color: #1FD6BB;
        transition: all 1;
    }

    .forms textarea{
        border-color: #EDEDED;
        border-radius: 5px;
        height: 80px;
        margin: 10px 2px;
        width: 80%;
    }
    .forms textarea:hover,textarea:focus {
        border-color: #1FD6BB;
        transition: all 1;
    }

    .form-horizontal .control-label {
        padding-top: 20px;
    }

    .tables td{
        height: 55px;
        line-height: 38px;
        border: 1px solid #DCDCDC!important;
    }
    .tables thead td{
        background: #F2F2F2;
    }
    .lines{
        line-height: 27px;
        border-left: 2px solid #1FD6BB;
    }
    .tables{
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
        /*text-align: center;*/
    }
    .tables thead{
        text-align: center;
    }
    .tables tbody td{
        text-align: center;
        padding: 0px;
    }
    .table-bordereds{
        border: 1px solid #ddd
    }
    .mar{
        margin-top: 25px;
    }
    .yanfa{
        color: #1FD6BB;
    }
    .task{
        color: #64BF62;
    }
    .quexian{
        color:#F95A55
    }
    /*已完成*/
    .successed{
        color: #00c292;
    }
    /*进行中*/
    .loading{
        color: #FEA31D;
    }
    /*未开始*/
    .notbegin{
        color: #F95A55;
    }


    .lines{
        line-height: 27px;
        border-left: 2px solid #1FD6BB;
    }
    .quebtn{
        padding: 9px 31px;
        border-radius: 19px;
        background: #1FD6BB;
        color: white;
        border: 0px;
    }
    .requiredcolor{
        color: red;
    }
    .forms select{
        border-color: #EDEDED;
        border-radius: 5px;
        height: 40px;
        margin: 10px 2px;
        width: 80%;
    }
    .forms select:hover,select:focus {
        border-color: #1FD6BB;
        transition: all 1;
    }

</style>
<body class="nav-md" style="background: #F0F0F0">



<div class="row">

    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">

            <div class="x_content">
                <div class="row" style="margin: 10px;">
                    <div class="row">
                        <div class=" col-md-3 ">
                            <span class="lines">&nbsp;创建项目</span>
                        </div>
                    </div>

                    <div id="wizard" class="form_wizard wizard_horizontal">
                        <ul class="wizard_steps">
                            <li>
                                <a href="#step-1">
                                    <span class="step_no">1</span>
                                    <span class="step_descr">
                                             <!-- Step 1<br />-->
                                              <small>基本信息</small>
                                          </span>
                                </a>
                            </li>
                            <li>
                                <a href="#step-2">
                                    <span class="step_no">2</span>
                                    <span class="step_descr">
                                              <!--Step 2<br />-->
                                              <small>选择配置</small>
                                          </span>
                                </a>
                            </li>

                        </ul>
                        <div id="step-1">
                            <div class="row" style="margin-top: 10px;color: #878787;">

                                <form class="form-horizontal form-label-left forms" novalidate>
                                    <div class="item form-group">
                                        <span class="control-label col-md-2 " for="name"><span class="required requiredcolor">*</span>项目名称
                                        </span>
                                        <div class="col-md-9">
                                            <input id="pname" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="pname" placeholder="" required="required" type="text">
                                        </div>
                                    </div>
                                    <div class="item form-group">
                                        <span class="control-label col-md-2 " for="name">项目编号</span>
                                        <div class="col-md-9 ">
                                            <input type="text" id="pnumber" name="pnumber" required="required" class="form-control col-md-7 col-xs-12">
                                        </div>
                                    </div>
                                    <div class="item form-group">
                                        <span class="control-label col-md-2 " for="name">任务编号前缀</span>
                                        <div class="col-md-9">
                                            <input type="text" id="ptaskpre" name="ptaskpre" data-validate-linked="email" required="required" class="form-control col-md-7 col-xs-12">
                                        </div>
                                    </div>

                                    <div class="item form-group">
                                        <span class="control-label col-md-2 " for="name">截止时间</span>
                                        <!--<div class="col-md-9">-->
                                        <fieldset>
                                            <div class="control-group">
                                                <div class="controls">
                                                    <div class="col-md-4 xdisplay_inputx form-group has-feedback">
                                                        <input type="text"  class="form-control has-feedback-left" id="single_cal2" placeholder="First Name" aria-describedby="inputSuccess2Status2">
                                                        <span class="fa fa-calendar-o form-control-feedback left" aria-hidden="true"></span>
                                                        <span id="inputSuccess2Status2" class="sr-only">(success)</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                        <!--</div>-->
                                    </div>
                                    <div class="item form-group">
                                        <span class="control-label col-md-2 " for="name">负责人</span>
                                        <div class="col-md-3">
                                            <select type="text" id="puserid" data-validate-linked="email" required="required" class="form-control col-md-7 col-xs-12">
                                                <option th:each="info,infoStat : ${admin}" th:attr="value=${info.id}" th:text="${info.account}">用户1</option>
                                                <!--<option value="2">用户2</option>-->
                                                <!--<option value="3">用户3</option>-->
                                            </select>
                                        </div>
                                    </div>
                                    <!--<div class="item form-group">
                                     <span class="control-label col-md-2 " for="name">所属分组</span>
                                     <div class="col-md-9">
                                       <select type="text" name="confirm_email" data-validate-linked="email" required="required" class="form-control col-md-7 col-xs-12">
                                           <option>1</option>
                                           <option>1</option>
                                       </select>
                                     </div>
                                   </div>-->
                                    <div class="item form-group">
                                        <span class="control-label col-md-2 " for="name">描述</span>
                                        <div class="col-md-9">
                                            <textarea id="description" name="description"></textarea>
                                        </div>
                                    </div>


                                </form>


                            </div>

                        </div>
                        <div id="step-2">
                            <div class="row" style="margin: 10px;">
                                <div class="row">
                                    <div class=" col-md-3 ">
                                        <span class="lines">&nbsp;选择合适的项目类型</span>
                                    </div>
                                </div>
                                <table class="tables table-bordereds">
                                    <thead>
                                    <tr>
                                        <!--<td>#</td>-->
                                        <td>任务类型</td>
                                        <td>备注</td>
                                        <td>默认</td>
                                    </tr>
                                    </thead>
                                    <tbody id="taskType">
                                        <tr th:each="info,infoStat : ${ptype}">
                                            <!--<td th:utext="${info.id}"></td>-->
                                            <td th:utext="${info.tname}" style="color: black;"></td>
                                            <td th:text="${info.description}"></td>
                                            <td th:utext="${info.input}"></td>
                                        </tr>

                                    </tbody>
                                </table>

                                <div class="clearfix"></div>


                                <div class="row" style="margin: 10px;">
                                    <div class="row">
                                        <div class=" col-md-3 ">
                                            <span class="lines">&nbsp;选择项目中需要使用的组件</span>
                                        </div>
                                    </div>
                                    <table class="tables table-bordereds">
                                        <thead>
                                        <tr>
                                            <!--<td>#</td>-->
                                            <td>项目组件</td>
                                            <td>备注</td>
                                            <td>默认</td>
                                        </tr>
                                        </thead>
                                        <tbody id="module">
                                        <tr>
                                            <!--<td>0</td>-->
                                            <td style="color: black;"><i class="fa fa-inbox yanfa" >&nbsp;</i>基础组件</td>
                                            <td>默认基础组件：/任务、概述、人员配置</td>
                                            <td >
                                                <input type="checkbox" class="js-switch" checked disabled="disabled"/>
                                            </td>
                                        </tr>
                                        <tr th:each="info,infoStat : ${module}">
                                            <!--<td th:utext="${info.id}"></td>-->
                                            <td th:utext="${info.tname}" style="color: black;"></td>
                                            <td th:text="${info.description}"></td>
                                            <td th:utext="${info.input}"></td>
                                        </tr>
                                        <!--<tr>-->
                                            <!--<td style="color: black;"><i class="fa fa-inbox yanfa" >&nbsp;</i>时间视图</td>-->
                                            <!--<td>使用甘特图展示当前项目所有任务时间分布</td>-->
                                            <!--<td >-->
                                                <!--<input type="checkbox" class="js-switch"/>-->
                                            <!--</td>-->
                                        <!--</tr>-->
                                        <!--<tr>-->
                                            <!--<td style="color: black;"><i class="fa fa-inbox yanfa" >&nbsp;</i>报表视图</td>-->
                                            <!--<td>查看项目进度报表</td>-->
                                            <!--<td >-->
                                                <!--<input type="checkbox" class="js-switch"/>-->
                                            <!--</td>-->
                                        <!--</tr>-->
                                        <!--<tr>-->
                                            <!--<td style="color: black;"><i class="fa fa-inbox yanfa" >&nbsp;</i>配置-基础配置</td>-->
                                            <!--<td>修改项目相关基本信息</td>-->
                                            <!--<td >-->
                                                <!--<input type="checkbox" class="js-switch"/>-->
                                            <!--</td>-->
                                        <!--</tr>-->
                                        <!--<tr>-->
                                            <!--<td style="color: black;"><i class="fa fa-inbox yanfa" >&nbsp;</i>配置-任务类型</td>-->
                                            <!--<td>修改项目默认任务类型</td>-->
                                            <!--<td >-->
                                                <!--<input type="checkbox" class="js-switch"/>-->
                                            <!--</td>-->
                                        <!--</tr>-->
                                        </tbody>
                                    </table>

                                </div>

                            </div>
                            <!-- End SmartWizard Content -->






                        </div>
                    </div>
                </div>
            </div>
            <!-- /page content -->



            <!-- jQuery -->
            <script src="/resa/vendors/jquery/dist/jquery.min.js"></script>
            <!-- Bootstrap -->
            <script src="/resa/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
            <!-- FastClick -->
            <script src="/resa/vendors/fastclick/lib/fastclick.js"></script>
            <!-- NProgress -->
            <script src="/resa/vendors/nprogress/nprogress.js"></script>
            <!-- jQuery Smart Wizard -->
            <script src="/resa/vendors/jQuery-Smart-Wizard/js/jquery.smartWizard.js"></script>
            <!-- Switchery -->
            <script src="/resa/vendors/switchery/dist/switchery.min.js"></script>
            <!-- bootstrap-daterangepicker -->
            <script src="/resa/vendors/moment/min/moment.min.js"></script>
            <script src="/resa/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
            <!-- bootstrap-datetimepicker -->
            <script src="/resa/vendors/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
            <!-- PNotify -->
            <script src="/resa/vendors/pnotify/dist/pnotify.js"></script>
            <script src="/resa/vendors/pnotify/dist/pnotify.buttons.js"></script>
            <script src="/resa/vendors/pnotify/dist/pnotify.nonblock.js"></script>
            <!-- Custom Theme Scripts -->
            <script src="/resa/build/js/custom.min.js"></script>

            <script>

                $(function() {
                    clickBox();
                });


                function clickBox(){
                    var inputs=$('#taskType').find("input")

                    $(inputs).each(function(ii,mm){
                        $(mm).change(function(){
                            if(this.checked){
                                $(inputs).each(function(jj,nn){
                                    if(this!=mm){
                                        if(this.checked){
                                            $(this).click()
                                        }
                                    }
                                })

                            }
                        })
                    })
                }

            </script>

</body>
</html>